<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" th:href="@{css/CustomForm.css}">
    <!--/*@thymesVar id="SimpleUser" type="cn.org.y24.EmploySystem.entity.SimpleUser"*/-->
    <title th:text="${SimpleUser.username}"></title>
</head>
<body>
</div>
<!--/*@thymesVar id="SimpleUser" type="cn.org.y24.EmploySystem.entity.SimpleUser"*/-->
<div class="topDiv">
    <header style="background: #0f6674;border-radius: 10px;">
        <div th:if="${SimpleUser.role eq 'ADMIN'}">
            <h1 th:text="${'ADMIN '+SimpleUser.username}"></h1>
        </div>
        <div th:if="${SimpleUser.role eq 'company'}">
            <h1 th:text="${'Company user '+SimpleUser.username}"></h1>
        </div>
        <div th:if="${SimpleUser.role eq 'graduate'}">
            <h1 th:text="${'Graduate user '+SimpleUser.username}"></h1>
        </div>
        <h1>Welcome to the Information Center!</h1>
        <!--/*@thymesVar id="status" type="java.lang.String"*/-->
        <div th:if="${status eq 'true'}">
            <p>Additional information is logged. you can modify it now.</p>
        </div>
        <div th:if="${status eq 'false'}">
            <p>Additional information isn't logged. you can add it now.</p>
        </div>
    </header>
    <section>
        <div class="DIV">
            <div class="CustomDiv">
                <h1>Password Management</h1>
                <div class="divideLine"></div>
                <p>
                    <label for="oldPassword" class="customLabel" id="oldPasswordLabel">
                        Old password
                    </label>
                    <input type="password" id="oldPassword" class="customInput" name="oldPassword" required
                           placeholder="Old password">
                </p>
                <p>
                    <label for="newPassword" class="customLabel" id="passwordLabel">
                        Change password
                    </label>
                    <input type="password" id="newPassword" class="customInput" name="password" required
                           placeholder="new password">
                </p>
                <p>
                    <label for="confirmPassword" class="customLabel" id="confirmPasswordLabel">
                        Confirm password
                    </label>
                    <label for="confirmPassword"></label>
                    <input type="password" id="confirmPassword"
                           class="customInput" required
                           placeholder="confirm password">
                </p>
                <input type="reset" data-editable="false" value="Reset" class="formButton">
                <button id="submitButton" class="formButton">Submit</button>
                <div class="divideLine"></div>
                <span id="registerResult"></span>
            </div>
        </div>
        <div class="DIV">
            <div class="CustomDiv">
                <h1>Information Management</h1>
                <div class="divideLine"></div>
                <p>
                    <label for="oldPassword" class="customLabel" id="oldPasswordLabel">
                        Old password
                    </label>
                    <input type="password" id="oldPassword" class="customInput" name="oldPassword" required
                           placeholder="Old password">
                </p>
                <p>
                    <label for="newPassword" class="customLabel" id="passwordLabel">
                        Change password
                    </label>
                    <input type="password" id="newPassword" class="customInput" name="password" required
                           placeholder="new password">
                </p>
                <p>
                    <label for="confirmPassword" class="customLabel" id="confirmPasswordLabel">
                        Confirm password
                    </label>
                    <label for="confirmPassword"></label>
                    <input type="password" id="confirmPassword"
                           class="customInput" required
                           placeholder="confirm password">
                </p>
                <input type="reset" data-editable="false" value="Reset" class="formButton">
                <button id="submitButton" class="formButton">Submit</button>
                <div class="divideLine"></div>
                <span id="registerResult"></span>
            </div>
        </div>
    </section>
</div>
</body>
<script>
    $(function () {
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        $(document).ajaxSend(function (e, xhr, options) {
            xhr.setRequestHeader(header, token);
        });
        $("#submitButton").click(function () {
            let username = $("#username").val();
            let password = $("#password").val();
            let confirmpassword = $("#confirmPassword").val();
            if (password.length < 5 || password.length > 50) {
                // $("#passwordLabel").after("<span style='color: red'> Password length should be 5-10</span>")
                $("#passwordLabel").html("<span style='color: red'> Password length should be 5-10</span>");
                return;
            } else {
                $("#passwordLabel").html("<span style='color: green'>Correct password length</span>")

            }

            if (confirmpassword !== password) {
                $("#confirmPasswordLabel").html("<span style='color: red'>Not matched, try again!</span>")
                return;
            } else {
                $("#confirmPasswordLabel").html("<span style='color: green'>matched, congratulations!</span>")
            }
            $.post("/doRegister", {
                "username": username,
                "password": password,
                "type": $("input:radio:checked").val()
            }, function (data, status, jqXHR) {
                if (data) {
                    if (data.toString() === "true") {
                        $("#registerResult").html("<span style='color: green'>Register succeeded! <a href='/login'>login</a></span>");
                        $("#usernameLabel").html("<span style='color: green'>Valid username!</span>")
                    } else {
                        $("#usernameLabel").html("<span style='color: red'>Invalid username! Try another.</span>")
                        $("#registerResult").html("<span style='color: red'>Register failed!</span>");
                    }

                }
            })
            // alert("username: " + username + " password: " + password + " " + $("input:radio:checked").val());
        })
    });
</script>
</html>